<template>
  <el-popover :placement="position">
    <!-- <a-icon slot="icon" type="question-circle-o" style="position: absolute; left: -99999px;" /> -->
    <template>
      <el-checkbox-group
        v-model="checkList"
        :disabled="disabled"
        @change="onChange"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="恒牙">
            <el-row>
              <div class="ctTopBox">
                <div class="leftTopBox">
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_18_Facial.png"
                      alt
                      @click="imgClick('lt8')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt8">8</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_17_Facial.png"
                      alt
                      @click="imgClick('lt7')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt7">7</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_16_Facial.png"
                      alt
                      @click="imgClick('lt6')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt6">6</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_15_Facial.png"
                      alt
                      @click="imgClick('lt5')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt5">5</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_14_Facial.png"
                      alt
                      @click="imgClick('lt4')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt4">4</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_13_Facial.png"
                      alt
                      @click="imgClick('lt3')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt3">3</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_12_Facial.png"
                      alt
                      @click="imgClick('lt2')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt2">2</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_11_Facial.png"
                      alt
                      @click="imgClick('lt1')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="lt1">1</el-checkbox>
                    </el-col>
                  </div>
                </div>
                <div class="rightTopBox">
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_21_Facial.png"
                      alt
                      @click="imgClick('rt1')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt1">1</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_22_Facial.png"
                      alt
                      @click="imgClick('rt2')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt2">2</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_23_Facial.png"
                      alt
                      @click="imgClick('rt3')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt3">3</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_24_Facial.png"
                      alt
                      @click="imgClick('rt4')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt4">4</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_25_Facial.png"
                      alt
                      @click="imgClick('rt5')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt5">5</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_26_Facial.png"
                      alt
                      @click="imgClick('rt6')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt6">6</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_27_Facial.png"
                      alt
                      @click="imgClick('rt7')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt7">7</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_28_Facial.png"
                      alt
                      @click="imgClick('rt8')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rt8">8</el-checkbox>
                    </el-col>
                  </div>
                </div>
              </div>
            </el-row>
            <el-row>
              <div class="ctBottomBox">
                <div class="leftBottomBox">
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb8">8</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_48_Facial.png"
                      alt
                      @click="imgClick('lb8')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb7">7</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_47_Facial.png"
                      alt
                      @click="imgClick('lb7')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb6">6</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_46_Facial.png"
                      alt
                      @click="imgClick('lb6')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb5">5</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_45_Facial.png"
                      alt
                      @click="imgClick('lb5')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb4">4</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_44_Facial.png"
                      alt
                      @click="imgClick('lb4')"
                    />
                  </div>

                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb3">3</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_43_Facial.png"
                      alt
                      @click="imgClick('lb3')"
                    />
                  </div>

                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb2">2</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_42_Facial.png"
                      alt
                      @click="imgClick('lb2')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lb1">1</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_41_Facial.png"
                      alt
                      @click="imgClick('lb1')"
                    />
                  </div>
                </div>
                <div class="rightBottomBox">
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb1">1</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_31_Facial.png"
                      alt
                      @click="imgClick('rb1')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb2">2</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_32_Facial.png"
                      alt
                      @click="imgClick('rb2')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb3">3</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_33_Facial.png"
                      alt
                      @click="imgClick('rb3')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb4">4</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_34_Facial.png"
                      alt
                      @click="imgClick('rb4')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb5">5</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_35_Facial.png"
                      alt
                      @click="imgClick('rb5')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb6">6</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_36_Facial.png"
                      alt
                      @click="imgClick('rb6')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb7">7</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_37_Facial.png"
                      alt
                      @click="imgClick('rb7')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rb8">8</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_38_Facial.png"
                      alt
                      @click="imgClick('rb8')"
                    />
                  </div>
                </div>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="乳牙">
            <el-row>
              <div class="ctTopBox">
                <div class="leftTopBox">
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_55_Facial.png"
                      alt
                      @click="imgClick('ltE')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="ltE">E</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_54_Facial.png"
                      alt
                      @click="imgClick('ltD')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="ltD">D</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_53_Facial.png"
                      alt
                      @click="imgClick('ltC')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="ltC">C</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_52_Facial.png"
                      alt
                      @click="imgClick('ltB')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="ltB">B</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_51_Facial.png"
                      alt
                      @click="imgClick('ltA')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="ltA">A</el-checkbox>
                    </el-col>
                  </div>
                </div>
                <div class="rightTopBox">
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_61_Facial.png"
                      alt
                      @click="imgClick('rtA')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rtA">A</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_62_Facial.png"
                      alt
                      @click="imgClick('rtB')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rtB">B</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_63_Facial.png"
                      alt
                      @click="imgClick('rtC')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rtC">C</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_64_Facial.png"
                      alt
                      @click="imgClick('rtD')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rtD">D</el-checkbox>
                    </el-col>
                  </div>
                  <div class="leftTopBoxItem">
                    <img
                      class="leftTopBoxItemImg"
                      src="@/assets/tooth/Tooth_65_Facial.png"
                      alt
                      @click="imgClick('rtE')"
                    />
                    <el-col style="text-align: center">
                      <el-checkbox label="rtE">E</el-checkbox>
                    </el-col>
                  </div>
                </div>
              </div>
            </el-row>
            <el-row>
              <div class="ctBottomBox">
                <div class="leftBottomBox">
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lbE">E</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_85_Facial.png"
                      alt
                      @click="imgClick('lbE')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lbD">D</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_84_Facial.png"
                      alt
                      @click="imgClick('lbD')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lbC">C</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_83_Facial.png"
                      alt
                      @click="imgClick('lbC')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lbB">B</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_82_Facial.png"
                      alt
                      @click="imgClick('lbB')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="lbA">A</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_81_Facial.png"
                      alt
                      @click="imgClick('lbA')"
                    />
                  </div>
                </div>
                <div class="rightBottomBox">
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rbA">A</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_71_Facial.png"
                      alt
                      @click="imgClick('rbA')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rbB">B</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_72_Facial.png"
                      alt
                      @click="imgClick('rbB')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rbC">C</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_73_Facial.png"
                      alt
                      @click="imgClick('rbC')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rbD">D</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_74_Facial.png"
                      alt
                      @click="imgClick('rbD')"
                    />
                  </div>
                  <div class="leftTopBoxItem">
                    <el-col style="text-align: center">
                      <el-checkbox label="rbE">E</el-checkbox>
                    </el-col>
                    <img
                      class="bottomBoxItemImg"
                      src="@/assets/tooth/Tooth_75_Facial.png"
                      alt
                      @click="imgClick('rbE')"
                    />
                  </div>
                </div>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-checkbox-group>
    </template>
    <div slot="reference" class="box">
      <span class="leftTop">{{ toothPosition.lt }}</span>
      <span class="rightTop">{{ toothPosition.rt }}</span>
      <span class="leftBottom">{{ toothPosition.lb }}</span>
      <span class="rightBottom">{{ toothPosition.rb }}</span>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'CtModules',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: 'bottom-start',
    },
  },
  data() {
    return {
      checkList: [],
    }
  },
  computed: {
    toothPosition() {
      return this.checkList.reduce(
        (tooth, current) => {
          if (current.indexOf('lt') !== -1) {
            tooth.lt += `${current.replace('lt', '')}`
          } else if (current.indexOf('rt') !== -1) {
            tooth.rt += `${current.replace('rt', '')}`
          } else if (current.indexOf('lb') !== -1) {
            tooth.lb += `${current.replace('lb', '')}`
          } else if (current.indexOf('rb') !== -1) {
            tooth.rb += `${current.replace('rb', '')}`
          }
          return tooth
        },
        {
          lt: '',
          rt: '',
          lb: '',
          rb: '',
        }
      )
    },
  },
  watch: {
    value(val) {
      this.setDatas(val)
    },
  },
  mounted() {
    this.setDatas(this.value)
  },
  methods: {
    setDatas(str) {
      if (str.length > 3) {
        this.getValueArray(str)
      } else {
        this.checkList = []
      }
    },
    getValueArray(msg) {
      let arr = msg.split('|')
      this.getNum(arr)
    },
    getNum(arr) {
      let arr1,
        arr2,
        arr3,
        arr4,
        arr5 = []
      if (arr[0].length != 0) {
        arr1 = this.computedString(arr[0], 'lt')
      }
      if (arr[1].length != 0) {
        arr2 = this.computedString(arr[1], 'rt')
      }
      if (arr[2].length != 0) {
        arr3 = this.computedString(arr[2], 'lb')
      }
      if (arr[3].length != 0) {
        arr4 = this.computedString(arr[3], 'rb')
      }
      let arr6 = arr5.concat(arr1, arr2, arr3, arr4)
      arr6 = arr6.filter(Boolean)
      this.checkList = arr6
    },
    computedString(text, val) {
      let arr = []
      let value = text.replace(/"([^a-zA-Z0-9]*)"/g, '')
      for (let i = 0; i < value.length; i++) {
        arr.push(`${val}${value[i]}`)
      }
      return arr
    },
    getArray(obj) {
      let arr = []
      for (let i in obj) {
        arr.push(obj[i]) //属性
      }
      arr = arr.join('|')
      return arr
    },
    onChange(checkedValues) {
      this.$emit(
        'change',
        this.getArray(this.toothPosition).length > 3
          ? this.getArray(this.toothPosition)
          : ''
      )
    },
    imgClick(id) {
      let index = this.checkList.indexOf(id)
      if (index > -1) {
        this.checkList.splice(index, 1)
      } else {
        this.checkList.push(id)
      }
      this.$emit(
        'change',
        this.getArray(this.toothPosition).length > 3
          ? this.getArray(this.toothPosition)
          : ''
      )
    },
  },
}
</script>

<style lang="scss" scoped>
// /deep/ .ant-popover-buttons {
//   position: absolute;
//   left: -99999px;
// }
.box {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: center;

  .leftTop,
  .rightTop,
  .leftBottom,
  .rightBottom {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    flex: 1;
    width: 166px;
    min-width: 50%;
    max-width: 166px;
    height: 33px;
    word-break: break-all;
    white-space: normal;
    font-size: 16px;
    justify-content: center;
    line-height: 1em;
    letter-spacing: 1px;
  }

  .leftTop {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  .rightTop {
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  .leftBottom {
    border-right: 1px solid #000;
    border-top: 1px solid #000;
  }

  .rightBottom {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
  }
}

#components-a-popconfirm-demo-placement .ant-btn {
  width: 70px;
  text-align: center;
  padding: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}

.ctTopBox,
.ctBottomBox {
  display: flex;
  flex-wrap: nowrap;

  .leftTopBox,
  .leftBottomBox {
    border-right: 1px solid #1890ff;
  }

  .rightTopBox,
  .rightBottomBox {
    border-left: 1px solid #1890ff;
  }

  .leftTopBox,
  .rightTopBox {
    border-bottom: 1px solid #1890ff;
  }

  .rightBottomBox,
  .leftBottomBox {
    border-top: 1px solid #1890ff;
  }

  .leftTopBox,
  .rightTopBox,
  .leftBottomBox,
  .rightBottomBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 4px;

    .leftTopBoxItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 4px;

      .leftTopBoxItemImg {
        margin-bottom: 6px;
      }

      .bottomBoxItemImg {
        margin-top: 6px;
      }

      .leftTopBoxItemImg,
      .bottomBoxItemImg {
        display: flex;
        flex-shrink: 0;
        width: 42px;
        height: 98px;
      }
    }
  }
}
</style>
